import { ProTableColumn, ProTableInst } from '@/components/pro-table/type'
import { NButton, NSpace } from 'naive-ui'

export const useSlotsProTable = () => {
  const proTableInst = ref<ProTableInst | null>(null)
  const columns: ProTableColumn[] = [
    {
      title: '普通列',
      key: 'key1',
      query: {
        type: 'input'
      }
    },
    {
      title: '自定义列属性',
      key: 'key2',
      props: {
        style: {
          color: 'red'
        }
      },
      click(row) {
        ;(window as any).$message.success(row['key2'])
      }
    },
    {
      type: 'link',
      title: '链接列',
      key: 'key3',
      query: {
        type: 'input'
      }
    },
    {
      type: 'dict',
      title: '字典列',
      key: 'key4',
      dictOptions: [
        {
          value: 100,
          label: '花花'
        },
        {
          value: 200,
          label: '啦啦'
        }
      ]
    },

    {
      type: 'tag',
      title: '标签列',
      key: 'key5',

      dictOptions: [
        {
          value: 100,
          label: '小明',
          props: {
            type: 'primary'
          }
        },
        {
          value: 200,
          label: '小红',
          props: {
            type: 'warning'
          }
        }
      ]
    },
    {
      type: 'switch',
      title: '开关列',
      key: 'key6',
      props: {
        onUpdateValue(val) {
          console.log(val)
        }
      },
      checkedText: '已启用',
      uncheckedText: '已禁用'
    },
    {
      type: 'date',
      title: '日期列',
      key: 'key7',
      format: 'YYYY-MM-DD HH:mm'
    },
    {
      title: '操作',
      width: 200,
      render() {
        return (
          <>
            <NSpace justify="center">
              <NButton text type="primary">
                详情
              </NButton>
              <NButton text type="error">
                删除
              </NButton>
            </NSpace>
          </>
        )
      }
    }
  ]

  return {
    proTableInst,
    columns
  }
}
